<!--jQuery animate() 方法允许您创建自定义的动画。
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
请注意，生成动画的过程中可同时使用多个属性：
默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
-->
<html>

<head>
    <!--如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。-->
    <meta charset="utf-8" />
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="../library/jquery.animate-colors.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            var animation = false;
            $("button#button1").click(function() {
                if (animation) {
                    $("div#div1").animate({
                        left: '250px',
                        opacity: '0.5',
                        height: '150px',
                        width: '150px',
                        backgroundColor: 'red'
                    });
                } else {
                    $("div#div1").animate({
                        left: '300px',
                        opacity: '1',
                        height: '300px',
                        width: '300px',
                        backgroundColor: 'blue',
                    }, "slow");
                }
                animation = !animation;

            });
            $("button#button2").click(function() {
                var div = $("div#div2");
                div.animate({
                    left: '100px'
                }, "slow");
                div.animate({
                    fontSize: '3em'
                }, "slow");
            });
            $("#stop").click(function() {
                $("#div1").stop();
            });

            $("button#button4").click(function() {
                $("#p1").css("color", "red")
                    .slideUp(2000)
                    .slideDown(2000);
            });
            $("button#button1").click(function() {
                alert("Text" + $("p#p1show".text()));
            });
        });
    </script>
</head>

<body>
    <button id="button1" style="width:100px;height:200px; position:relative;left:10px;top:100px;background:red"></button>
    <div id="div1" style="position:absolute;left:100px;top:100px;width:300px;height:300px;background:greenyellow"></div>

    <!-- jQuery animate() - 使用队列功能
    默认地，jQuery 提供针对动画的队列功能。
    这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。 -->
    <button id="button2" style="position:absolute;left:300px;top:800px">开始动画</button>
    <p id="p1show">默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
    <div id="div2" style="background:#98bf21;height:200px;width:200px;position:absolute;left:300px;top:1000px;">HELLO</div>
    <button id="stop">停止滑动</button>
    <!-- 直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。
    不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。 -->
    <p id="p1" style="position:absolute;left:100px;top:1300px">jQuery 乐趣十足！</p>
    <button id="button4" style="position:absolute;left:100px;top:1400px">点击这里</button>
</body>


</html>